<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="eye.css">
</head>

<body>
  <div class="box">
    <label>
      <img src="images/close.png" id="eye">
    </label>
    <input type="password" id="pwd">
  </div>
</body>

</html>
<script>
  //获取元素
  var eye = document.getElementById('eye')
  var pwd = document.getElementById('pwd')
  //注册事件
  eye.onclick = function () {
    if (pwd.type == 'password') {
      pwd.type = 'text';
      eye.src = 'images/open.png';
    } else {
      pwd.type = 'password';
      eye.src = 'images/close.png';
    }
  }
</script>